<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"></meta>
<title>认证码输入页面</title>

<style>

canvas {
	border:1px solid red;
}

button {
	width:40px;
	height:40px;
}

#footer {
	background-color: grey;
	text-align: center;
	height:40px;
	position: fixed;
	bottom:0px;
	width:100%;
}
</style>
<script type="text/javascript" src="frame/js/jquery-1.4.js"></script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/javascript">
var CanvasDrawr=function(options){
	var canvas=document.getElementById(options.id),ctxt=canvas.getContext("2d");
	canvas.style.width='100%';
	canvas.width=canvas.offsetWidth;
	canvas.style.width='';
	ctxt.lineWidth=options.size||Math.ceil(Math.random()*35);
	ctxt.lineCap=options.lineCap||"round";
	ctxt.pX=undefined;ctxt.pY=undefined;var lines=[,,];
	var offset=$(canvas).offset();
	var self={
		init:function(){
				canvas.addEventListener('touchstart',self.preDraw,false);
				canvas.addEventListener('touchmove',self.draw,false);},
				preDraw:function(event){
					$.each(event.touches,function(i,touch){
						var id=touch.identifier,
						colors=["red","green","yellow","blue","magenta","orangered"],
						mycolor=colors[Math.floor(Math.random()*colors.length)];
						lines[id]={x:this.pageX-offset.left,y:this.pageY-offset.top,color:mycolor};
					});
					event.preventDefault();
				},
		draw:function(event){
			var e=event,hmm={};
			$.each(event.touches,function(i,touch){
				var id=touch.identifier,
					moveX=this.pageX-offset.left-lines[id].x,
					moveY=this.pageY-offset.top-lines[id].y;
					var ret=self.move(id,moveX,moveY);
					lines[id].x=ret.x;lines[id].y=ret.y;
			});
			event.preventDefault();
		},
		move:function(i,changeX,changeY){
				ctxt.strokeStyle=lines[i].color;
				ctxt.beginPath();
				ctxt.moveTo(lines[i].x,lines[i].y);
				ctxt.lineTo(lines[i].x+changeX,lines[i].y+changeY);
				ctxt.stroke();
				ctxt.closePath();
				return{x:lines[i].x+changeX,y:lines[i].y+changeY};
		}
	};
	return self.init();
};
	$(function(){
		var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example",size:8});
		var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example2",size:8});
		document.getElementById('button').addEventListener('touchend', function(){
			alert('hello,boy')
		},false);
	});
</script>
</head>
<body>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<button id="button">保存</button>
	<canvas id="example2" height="450" width="922" style="">it does not support canvas tag</canvas>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<canvas id="example" height="450" width="922" style="">it does not support canvas tag</canvas>
	<div id="footer">footer</div>
</body>